<template>
  <div class="editposter" :class="preview&&'boxShadow border1px'">
    <div class="editposter-box" :class="!preview && 'padding-back'">
      <div class="editposter-box-html" ref="imageWrapper" v-if="!posterimage">
        <img class="posterimg" :src="selectPoster.content" alt="">
        <div class="editposter-broker">
          <div class="broker-box">
            <img :src="avatarUrl" class="broker-avator" alt="">
            <div class="broker-info">
              <p class="broker-name">{{nickName}}</p>
              <p class="broker-phone">{{registerMobile}}</p>
            </div>
          </div>
          <img class="broker-minicode" :src="nameCardInfo.miniQrCode" alt="">
        </div>
      </div>
      <i class="icon del-icon" v-if="!preview" @click.stop="delClickHandler"/>
      <div class="editposter-image" v-if="posterimage">
        <img :src="posterimage"  preview-text="">
      </div>
    </div>
  </div>
</template>
<script>
import h2c from 'html2canvas'
import userService from 'SERVICE/userService'
import { mapGetters } from 'vuex'
export default {
  name:"editPoster",
  props:{
    selectPoster:{type:Object},
    preview: { type: Boolean, default: false },
  },
  data:() => ({
    posterimage:"",
    nickName:"",
    avatarUrl:"",
    registerMobile:"",
    nameCardInfo:{}
  }),
  mounted() {
    this.$nextTick(()=>{
      this.init();
    })
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.nickName = this.userInfo.name;
    this.avatarUrl = this.userInfo.avatarUrl;
    this.registerMobile = this.userInfo.registerMobile;     
  },
  methods: {
    async init(){
      await this.getCardInfo();
      await this.htmlToImg();
    },
    delClickHandler(){
      this.$emit('delete')
    },
        // 获取经纪人详情
    async getCardInfo() {
      let result = await userService.getQrCodeByToken()
      if (result) {
        this.nameCardInfo = result
        if(result.mobile){
          this.registerMobile = result.mobile;
        }
      }
    },
    htmlToImg(){   
        
       // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas")
      // 获取父标签，意思是这个标签内的 DOM 元素生成图片
      let canvasBox = this.$refs.imageWrapper
      // 获取父级的宽高
      const width = 343;
      const height = 464;
      
      // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
      canvas.width = width * 5
      canvas.height = height * 5
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      
      const context = canvas.getContext("2d");
      context.scale(5, 5);

      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
        allowTaint: false,
        logging: false,
      }
      h2c(canvasBox, options).then((canvas) => {
        var context = canvas.getContext('2d');
        // 【重要】关闭抗锯齿
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;

        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png")
        this.posterimage = dataURL;
        this.$previewRefresh()
      })
    }
  },
}
</script>
<style lang="less" scoped>
.padding-back{
  padding: 8px;
  border: 1px dashed #007AE6;
  background: rgba(0, 122, 230, 0.1);
}
.editposter{
  margin-top: 16px;
  .editposter-box{
    position: relative;
    .editposter-image{
      width: 100%;
      height: 464px !important;
    }
    > .del-icon {
      position: absolute;
      width: 28px;
      height: 28px;
      background: url(../../../assets/img/article/articlex.png) center no-repeat;
      background-size: 100% 100%;
      top: 0;
      right: 0;
      color: #ea4d2e;
    }
    .editposter-box-html{
      width: 100%;      
      .posterimg{
        width: 100%;
        display: block;
        height: 390px !important;
      }
      .editposter-broker{
        display: flex;
        justify-content: space-between;
        justify-items: center;
        background: #fff;
        padding: 6px 16px;
        .broker-box{
          display: flex;
          align-items: center;
          line-height: 1;
          .broker-avator{
            width: 41px;
            height: 41px !important;
            border-radius: 50%;
            margin-right: 8px;
          }
          .broker-name{
            font-size: 15px;
            color: #333333;
            line-height: 21px;
            font-weight: bold;
          }
          .broker-phone{
            font-size: 12px;
            color: #969EA8;
            line-height: 17px;
          }
        }
        .broker-minicode{
          width: 61px;
          height: 61px !important;
        }
      }
    }
  }
}
</style>
